{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Introduction"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import stitch"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "b05706653924451ab8c6464f439f4a4e",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "StitchWidget(initial_height='auto', initial_width='100%', srcdoc='\\n<html style=\"\">\\n<script>\\nwindow.addEvent…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "w = stitch.StitchWidget()\n",
    "w.srcdoc = \"\"\"\n",
    "<html style=\"\">\n",
    "<script>\n",
    "window.addEventListener(\"message\", function(event) {\n",
    "    if (event.source === window.parent) {\n",
    "        if (event.data.type === \"kernelmsg\") {\n",
    "            document.getElementById(\"msgview\").innerHTML = event.data.content;\n",
    "            window.parent.postMessage({type: \"clientmsg\", content: event.data.content}, \"*\");\n",
    "            // Save state for offline render\n",
    "            window.parent.postMessage({type: \"state\", content: event.data.content}, \"*\");\n",
    "        } else if (event.data.type === \"init_state\") {\n",
    "            document.getElementById(\"msgview\").innerHTML = event.data.content;\n",
    "        }\n",
    "    }\n",
    "});\n",
    "\n",
    "window.addEventListener(\"load\", function(){\n",
    "    var prevHeight = 0;\n",
    "    setInterval(function() {\n",
    "        var body = document.body;\n",
    "        var html = document.documentElement;\n",
    "        var height = html.getBoundingClientRect().height\n",
    "        if (height !== prevHeight && html.checkVisibility()) {\n",
    "            msg = {\n",
    "                type: 'resize',\n",
    "                content: {\n",
    "                    height: height + 'px',\n",
    "                    width: '100%'\n",
    "                }\n",
    "            };\n",
    "            window.parent.postMessage(msg, \"*\");\n",
    "            prevHeight = height;\n",
    "        }\n",
    "    }, 100);\n",
    "});\n",
    "\n",
    "</script>\n",
    "<body style=\"\">\n",
    "<div>\n",
    "MESSAGE: <span id=\"msgview\" style=\"background-color: #90ee90;\"></span>\n",
    "</div>\n",
    "</body>\n",
    "</html>\n",
    "\"\"\"\n",
    "w.initial_width = '100%'\n",
    "w.initial_height = 'auto'\n",
    "display(w)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "w.kernelmsg = \"\"\"\n",
    "A language model is a probabilistic model of a natural language.[1] In 1980, the first significant statistical language model was proposed, and during the decade IBM performed ‘Shannon-style’ experiments, in which potential sources for language modeling improvement were identified by observing and analyzing the performance of human subjects in predicting or correcting text.[2]\n",
    "\n",
    "Language models are useful for a variety of tasks, including speech recognition[3] (helping prevent predictions of low-probability (e.g. nonsense) sequences), machine translation,[4] natural language generation (generating more human-like text), optical character recognition, handwriting recognition,[5] grammar induction,[6] and information retrieval.[7][8]\n",
    "\n",
    "Large language models, currently their most advanced form, are a combination of larger datasets (frequently using words scraped from the public internet), feedforward neural networks, and transformers. They have superseded recurrent neural network-based models, which had previously superseded the pure statistical models, such as word n-gram language model. \n",
    "\"\"\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Wow, a change!\n"
     ]
    }
   ],
   "source": [
    "w.observe(lambda x: print(x['new']), 'kernelmsg')\n",
    "w.kernelmsg = \"Wow, a change!\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.12.5"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {
     "b05706653924451ab8c6464f439f4a4e": {
      "model_module": "@guidance-ai/stitch",
      "model_module_version": "^0.1.1",
      "model_name": "StitchModel",
      "state": {
       "_model_module_version": "^0.1.1",
       "_view_module_version": "^0.1.1",
       "clientmsg": "Wow, a change!",
       "initial_height": "auto",
       "initial_width": "100%",
       "kernelmsg": "Wow, a change!",
       "layout": "IPY_MODEL_c8d8410bc496453882680ff0fb8f6d0d",
       "srcdoc": "\n<html style=\"\">\n<script>\nwindow.addEventListener(\"message\", function(event) {\n    if (event.source === window.parent) {\n        if (event.data.type === \"kernelmsg\") {\n            document.getElementById(\"msgview\").innerHTML = event.data.content;\n            window.parent.postMessage({type: \"clientmsg\", content: event.data.content}, \"*\");\n            // Save state for offline render\n            window.parent.postMessage({type: \"state\", content: event.data.content}, \"*\");\n        } else if (event.data.type === \"init_state\") {\n            document.getElementById(\"msgview\").innerHTML = event.data.content;\n        }\n    }\n});\n\nwindow.addEventListener(\"load\", function(){\n    var prevHeight = 0;\n    setInterval(function() {\n        var body = document.body;\n        var html = document.documentElement;\n        var height = html.getBoundingClientRect().height\n        if (height !== prevHeight && html.checkVisibility()) {\n            msg = {\n                type: 'resize',\n                content: {\n                    height: height + 'px',\n                    width: '100%'\n                }\n            };\n            window.parent.postMessage(msg, \"*\");\n            prevHeight = height;\n        }\n    }, 100);\n});\n\n</script>\n<body style=\"\">\n<div>\nMESSAGE: <span id=\"msgview\" style=\"background-color: #90ee90;\"></span>\n</div>\n</body>\n</html>\n",
       "state": "Wow, a change!"
      }
     },
     "c8d8410bc496453882680ff0fb8f6d0d": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "2.0.0",
      "model_name": "LayoutModel",
      "state": {}
     }
    },
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
